<template>
  <!-- 父级页面布局，包含头部和左侧菜单栏 -->
  <div style="display: flex; background-color: black; justify-content: center; align-items: center;">
    <!-- 左侧部分 -->
    <div>
      <!-- 左侧菜单栏的顶部条 -->
      <el-row style="width: 360px;">
        <el-col>
          <!-- 导航链接到首页，样式自定义 -->
          <router-link to="/"
                       style="color: #42b983; text-decoration: none; font-weight: bold; position: relative; font-size: 20px">
            门急诊电子病历系统后台管理
          </router-link>
        </el-col>
      </el-row>
    </div>

    <!-- 空白区域，用于放置额外内容或控件 -->
    <!--  管理员界面  -->
    <div :style="{ width: 'calc(100% - 600px - 100px)' }" v-show="isAdministrators">
      <el-row :gutter="30" style="display: flex; justify-content: center; align-items: center;">
        <el-col :span="5">
          <div class="hover-box" @click="handleCommand('/registeredAdmin')">
            <span style="font-size: 20px; color: #f5f5f5;">挂号管理</span>
          </div>
        </el-col>
        <el-col :span="5">
          <div class="hover-box" @click="handleCommand('/historyAdmin')">
            <span style="font-size: 20px; color: #f5f5f5;">病例管理</span>
          </div>
        </el-col>
        <el-col :span="5">
          <el-dropdown trigger="click" style="text-align: left;">
            <div class="el-dropdown-link hover-box" style="display: flex; align-items: center;">
              <span style="font-size: 20px; color: #f5f5f5;">账号管理</span>
              <i class="el-icon-arrow-down el-icon--right" style="margin-left: 8px;"></i>
            </div>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item style="color: black;" @click="handleCommand('/admin')">管理员管理</el-dropdown-item>
                <el-dropdown-item style="color: black;" @click="handleCommand('/doctorAdmin')">医生管理</el-dropdown-item>
                <el-dropdown-item style="color: black;" @click="handleCommand('/patientAdmin')">患者管理</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </el-col>
        <el-col :span="4">
          <el-dropdown trigger="click" style="text-align: left;">
            <div class="el-dropdown-link hover-box" style="display: flex; align-items: center;">
              <span style="font-size: 20px; color: #f5f5f5;">
                库管理 <i class="el-icon-arrow-down el-icon--right"></i>
              </span>
            </div>
            <template #dropdown>
              <el-dropdown-menu >
                <el-dropdown-item style="color: black;">诊断和鉴别诊断库</el-dropdown-item>
                <el-dropdown-item style="color: black;">医学术语库</el-dropdown-item>
                <el-dropdown-item style="color: black;">病例质控规则库</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </el-col>
        <el-col :span="5">
          <el-dropdown trigger="click" style="text-align: left;">
            <div class="el-dropdown-link hover-box" style="display: flex; align-items: center;">
              <span style="font-size: 20px; color: #f5f5f5;">
                系统管理 <i class="el-icon-arrow-down el-icon--right"></i>
              </span>
            </div>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item style="color: black;" @click="handleCommand('/medicineOption')">药品项管理</el-dropdown-item>
                <el-dropdown-item style="color: black;" @click="handleCommand('/medicine')">药品类管理</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </el-col>
      </el-row>
    </div>

    <!-- 空白区域，用于放置额外内容或控件 -->
    <!--  患者界面  -->
    <div :style="{ width: 'calc(100% - 600px - 100px)' }" v-show="isPatient">
      <el-row :gutter="10" style="display: flex; justify-content: center; align-items: center;" >
        <el-col :span="4">
          <span style="font-size: 20px; color: #f5f5f5;">挂号</span>
        </el-col>
        <el-col :span="4">
          <span style="font-size: 20px; color: #f5f5f5;">查询</span>
        </el-col>
        <el-col :span="4">
          <span style="font-size: 20px; color: #f5f5f5;">病史</span>
        </el-col>
      </el-row>
    </div>

    <!-- 空白区域，用于放置额外内容或控件 -->
    <!--  医生界面  -->
    <div :style="{ width: 'calc(100% - 600px - 100px)' }" v-show="isDoctor"></div>
    <!-- 右侧部分，包含顶部条和可能的其他内容 -->
    <div :style="{ width: '200px' }">
      <!-- 右侧顶部条，包含登录信息 -->
      <el-header style="background-color: black; height: 10vh; padding-top: 22px;">
        <!-- 使用el-row和el-col进行布局 -->
        <el-row :gutter="10">
          <el-col :span="24" style="position: relative;">
            <!-- 右侧顶部的下拉菜单，用于用户操作如退出登录 -->
            <el-dropdown trigger="click" style="position: absolute; right: 20px;">
                            <span style="font-size: 19px; font-weight: bold; color: #f5f5f5;">
                                {{ Name }}
                                <el-icon><arrow-down /></el-icon> <!-- 确保arrow-down图标已正确引入 -->
                            </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </el-col>
        </el-row>
      </el-header>
    </div>
  </div>
  <div>
    <!-- 主体内容  -->
    <el-main style="height: 90vh;padding:0;overflow-y:auto;">
      <router-view/>
    </el-main>
  </div>
</template>

<script setup>
import {onMounted, ref} from "vue";
import {RouterLink, useRouter } from 'vue-router';

// 使用 useRouter 钩子来获取 router 实例
const router = useRouter();
console.log(router);

// 定义 handleCommand 函数
function handleCommand(command) {
  router.push(command);
}

//定义变量控制管理员内容是否隐藏
const isAdministrators = ref(false);
//定义变量控制患者内容是否隐藏
const isPatient = ref(false);
//定义变量控制医生内容是否隐藏
const isDoctor = ref(false);
//定义变量保存名字
const Name =ref('');


//判断当前登录人的身份
const identity = () => {
  if (user.value.sole == 10){
    isAdministrators.value=true;
    isPatient.value=false
    Name.value=user.value.name
  } else if (user.value.sole == 30){
    isAdministrators.value=false;
    isPatient.value=true
    Name.value=user.value.patientName;
  } else {
    isAdministrators.value=false;
    isPatient.value=false;
    isDoctor.value=true;
    Name.value=user.value.doctor
  }
}

onMounted(()=>{
  identity();
})

//获取当前登录人的数据
const user = ref(getUser());

//定义退出登录的方法
const logout = ()=>{
  if(confirm('是否要退出登录?')){
    //退出时要清除当前登录的用户数据
    localStorage.removeItem('user');
    //退出后要去到登录页
    window.location.href = '/login';
    //再清空刚刚取出来的用户数据
    user.value = '';
  }
}

</script>

<style scoped>
.hover-box {
  padding: 3.3vh; /* 根据需要调整内边距 */
  cursor: pointer; /* 鼠标悬浮时显示为手型 */
  transition: background-color 0.3s; /* 添加过渡效果 */
}

.hover-box:hover {
  background-color: #a9a9a9; /* 鼠标悬浮时的背景色 */
  color: #ffffff; /* 如果需要，也可以改变文字颜色 */
}

/* 如果需要为 el-dropdown-item 添加全局悬浮样式 */
.el-dropdown-menu .el-dropdown-item:hover {
  background-color: #a9a9a9; /* 鼠标悬浮时的背景色 */
  color: #ffffff; /* 文字颜色 */
}
</style>



